<template>
    <div class="my-qcode">
        <div class="content">
            <div class="content-wapper">
              <img :src="this.icon" class="head-img">
              <p>{{this.username}}</p>
              <div class="qrcode" id="my-qrcode" ref="qrcode"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      codes: ""
    };
  },
  components: { QRCode },
  methods: {
    useqrcode() {
      let codeStr = "fuc:bind," + "userid:" + this.userid;
      let rem=parseFloat(window.getComputedStyle(document.documentElement)["fontSize"]);
      let qrcode = new QRCode("my-qrcode", {
        width: 1.7*rem, // 设置宽度
        height: 1.7*rem, // 设置高度
        text: codeStr
      });
    }
  },
  activated() {
    
  },
  mounted() {
    this.useqrcode();
  },
  computed: {
    ...mapState([
      "path",
      "userid",
      "role",
      "icon",
      "gender",
      "username",
      "openid"
    ])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.my-qcode {
  height 100%;
  background-color: #515151;
  color: #595656;
  position relative;
  
  .content {
    position absolute;
    left .25rem;
    right .25rem;
    top .45rem;
    bottom .45rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius 0.04rem;

    .content-wapper {
      text-align: center;

      .head-img {
        margin-top: 0.1rem;
        width: .9rem;
        height: .9rem;
        border-radius: 1rem;
        border: 2px #BE8798 solid;
        box-shadow: 0 0px 4px rgba(0, 0, 0, 0.6);
      }

      p {
        margin-top: 0.04rem;
        font-size: 0.13rem;
        letter-spacing .01rem;
      }

      .qrcode {
        margin-top: 0.36rem;
        display: inline-block;
      }
    }
  }
}
</style>
